<template>
  <div class="informcao">
    <header>
      <span @click.stop="$openPage('/order')"><el-icon size="18">
          <Back />
        </el-icon></span>
      <h3>{{ $t("language.informcao.title") }}</h3>
      <strong></strong>
    </header>
    <div style="height: 73px"></div>
    <main class="main">
      <NuxtImg src="/img/pix.png" alt="" />
      <p>{{ $t("language.informcao.text1") }}</p>
      <p>{{ $t("language.informcao.text2") }}</p>
      <p><strong>{{ $t("language.informcao.text3") }}</strong>{{ $t("language.informcao.text4") }}</p>
      <div id="qrCodeBox"></div>
      <!-- @click="copyToClipboard(paymentinfo.qrCode,proxy)" -->
      <div class="copy">
        <el-icon color="#0B6BFF" size="16">
          <document />
        </el-icon>
        {{ $t("language.informcao.copy") }}
      </div>
      <!-- <img src="@/assets/img/idd.png" alt="" />
    <ul>
      <li>9e20d163180d4ee789f02b18f77b5578</li>
      <li>
        <span>{{ $t("language.informcao.price") }}</span>
        <strong>30 {{ $t("language.informcao.money") }}</strong>
      </li>
    </ul>
    <div>
      <p>{{ $t("language.informcao.text1") }}</p>
      <p>{{ $t("language.informcao.text2") }}</p>
      <div id="qrCodeBox"></div>
      <div class="copy">
        <span>{{ $t("language.informcao.color") }}</span>
        
      </div>
    </div>
    <h3>
      <span>{{ $t("language.informcao.power") }}</span>
      <img src="@/assets/img/pix.png" alt="" />
    </h3> -->
    </main>
  </div>
</template>
<script setup lang="ts">
// import { copyToClipboard } from "~/utils/common";
import { Back, Document } from '@element-plus/icons-vue'
import { onMounted, nextTick, ref, computed, reactive } from "vue";
import QRCode from 'qrcodejs2-fix';

const store = useStore()
let paymentinfo: any = computed(() => store.orderinfo)
// 生成方法
const getQrCode = () => {
  // 获取支付信息
  nextTick(() => {
    let dom: any = document.getElementById('qrCodeBox')
    dom.innerHTML = '';
    new QRCode(dom, {
      text: paymentinfo.value.payUrl, // 扫码后显示的内容, 如果页面链接, 扫码后会直接跳转到链接
      width: 160, //二维码宽
      height: 160, //二维码高
    });
  });
}
onMounted(() => {
  if (paymentinfo.value.payUrl) {
    getQrCode();
  }

});


// onMounted(async () => {
//   const canvas = await QRCode.toDataURL(text);
//   qrCodeSrc.value = canvas;
// });
</script>
<style scoped lang="scss">
.informcao {
  width: 100%;

  header {
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    @include flex(row, space-between, center);
    background-color: rgb(36, 39, 43);
    padding: 30px 15px 9px;
    color: #fff;

    span {
      display: block;
      height: 30px;
      width: 30px;
      @include flex(row, center, center);
      border: 2px solid #fff;
      border-radius: 16px;
      cursor: pointer;

      img {
        width: 100%;
        height: 100%;
      }
    }

    strong {
      width: 34px;
      height: 34px;
      display: block;
    }

    dl {
      flex: 1;
      @include flex(row, center, center);

      dd {
        color: #8e8e8c;
        font-size: 18px;
        position: relative;
      }

      .active {
        color: #fff;

        &::after {
          content: "";
          position: absolute;
          width: 60%;
          bottom: -4px;
          height: 2px;
          background-color: #fff;
          margin-left: -30%;
          left: 50%;
        }
      }

      dd+dd {
        margin-left: 20px;
      }
    }
  }

  .main {
    width: 100%;
    height: 100%;
    padding: 50px 0 0 0;
    @include flex(column, flex-start, center);

    #qrCodeBox {
      margin-top: 30px;
    }

    >img {
      height: 50px;
      display: block;
      margin-bottom: 20px;
    }

    p {
      width: 75%;
      text-align: center;
      color: #525252;

      strong {
        color: #525252;
      }
    }

    .copy {

      background: #E6F0FF;
      color: #0B6BFF;
      font-size: 16px;
      font-weight: bold;
      border-radius: 5px;
      cursor: pointer;
      border: none;
      padding: 12px 18px;
      margin-top: 25px;
    }
  }
}
</style>
